<template>
  <view class="home-page">
    <view class="search-box">
      <my-search @on-click="onClickHandler"></my-search>
    </view>
    <!-- 轮播图区域 -->
    <swiper v-if="swiperList.length" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
      :circular="true" class="home-swiper">
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
          <image :src="item.image_src" mode="aspectFill"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 分类导航区域 -->
    <view class="nav-list" v-if="navList.length">
      <view class="nav-item" v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)">
        <image :src="item.image_src" class="nav-img" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 楼层区域 -->
    <view class="floor-list" v-if="floorList.length">
      <view class="floor-item" v-for="(item, i) in floorList" :key="i">
        <!-- 楼层标题 -->
        <image v-if="item.floor_title" :src="item.floor_title.image_src" class="floor-title" mode="widthFix"></image>

        <!-- 楼层图片区域 -->
        <view class="floor-img-box" v-if="item.product_list && item.product_list.length">
          <!-- 左侧大图片 -->
          <view class="left-img-box">
            <image :src="item.product_list[0].image_src" mode="widthFix"></image>
          </view>

          <!-- 右侧图片区域 -->
          <view class="right-img-box">
            <!-- 普通图片区域 -->
            <view class="normal-img-box">
              <view class="normal-img-item" v-for="(item2, i2) in getNormalProductList(item.product_list)" :key="i2">
                <image :src="item2.image_src" mode="widthFix"></image>
              </view>
            </view>

            <!-- 红色圈出的图片区域 - 上下布局 -->
            <view class="special-img-box" v-if="getSpecialProductList(item.product_list).length > 0">
              <view class="special-img-item" v-for="(item3, i3) in getSpecialProductList(item.product_list)"
                :key="'special-' + i3">
                <image :src="item3.image_src" mode="widthFix"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getSwiperData,
    getNavData,
    getFloorData
  } from '../../api/home.js';
  export default {
    data() {
      return {
        swiperList: [],
        navList: [],
        floorList: [],
      }
    },
    onLoad() {
      this.getSwiperList()
      this.getNavList()
      this.getFloorList()
    },
    methods: {
      async getSwiperList() {
        try {
          this.swiperList = await getSwiperData()
        } catch (err) {
          console.error('轮播图请求失败：', err)
          uni.showToast({
            title: '轮播图加载失败',
            icon: 'none'
          })
        }
      },
      async getNavList() {
        try {
          this.navList = await getNavData()
        } catch (err) {
          console.error('分类导航请求失败：', err)
          uni.showToast({
            title: '分类导航加载失败',
            icon: 'none'
          })
        }
      },
      async getFloorList() {
        try {
          this.floorList = await getFloorData()
        } catch (err) {
          console.error('楼层数据请求失败：', err)
          uni.showToast({
            title: '楼层加载失败',
            icon: 'none'
          })
        }
      },
      navClickHandler(item) {
        if (item.name === '分类') {
          uni.switchTab({
            url: '/pages/cate/cate',
            fail: (err) => {
              console.error('跳转分类页失败：', err)
              uni.showToast({
                title: '跳转失败，请检查配置',
                icon: 'none'
              })
            }
          })
        }
      },
      // 获取普通图片列表（排除红色圈出的图片）
      getNormalProductList(productList) {
        if (!productList || productList.length <= 1) return [];

        const rightImages = productList.slice(1);
        const redCircledIndices = [1, 2]; // 根据你的图片调整这些索引

        return rightImages.filter((item, index) =>
          !redCircledIndices.includes(index)
        );
      },

      // 获取红色圈出的特殊图片列表
      getSpecialProductList(productList) {
        if (!productList || productList.length <= 1) return [];

        const rightImages = productList.slice(1);
        const redCircledIndices = [1, 2]; // 根据你的图片调整这些索引

        return rightImages.filter((item, index) =>
          redCircledIndices.includes(index)
        );
      },

      //搜索框
      onClickHandler() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search-box {
    // 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 999;
  }

  .home-swiper {
    height: 330rpx;

    .swiper-item {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }

  .nav-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20rpx 0;
    background-color: #fff;

    .nav-item {
      display: flex;
      justify-content: center;
      align-items: center;

      .nav-img {
        width: 128rpx;
        height: 140rpx;
      }
    }
  }

  .floor-list {
    .floor-item {
      margin-bottom: 0;

      .floor-title {
        width: 100%;
        height: 60rpx;
        display: block;
      }

      .floor-img-box {
        display: flex;
        padding: 0;
        gap: 0;

        .left-img-box {
          flex: 1;

          image {
            width: 100%;
            height: auto;
            display: block;
          }
        }

        .right-img-box {
          flex: 1;
          display: flex;
          flex-direction: column;

          .normal-img-box {
            display: flex;
            flex-wrap: wrap;

            .normal-img-item {
              width: 50%;

              image {
                width: 100%;
                height: auto;
                display: block;
              }
            }
          }

          .special-img-box {
            display: flex;
            flex-direction: column;

            .special-img-item {
              width: 100%;
              height: 150rpx;
              /* 调整特殊图片的高度 */

              image {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover;
                /* 确保图片填充容器 */
              }
            }
          }
        }
      }
    }
  }

  /* 去除所有多余的空白和间距 */
  view,
  image,
  swiper,
  swiper-item {
    box-sizing: border-box;
  }

  .floor-list .floor-item:last-child {
    margin-bottom: 0;
  }
</style>